<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="css/common.css" type="text/css" />

        <link rel="stylesheet" href="styles/{{style}}.css">
        <script src="jquery-2.1.4.min.js"></script>
        <script src="highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>

    <body>
        <pre><code class>{{{content}}}</code></pre>

        {{#linenumbers}}
        <script>
            $('pre>code').each(function() {
                var current = $(this),
                lineStart = parseInt(current.data('line-start')),
                lineFocus = parseInt(current.data('line-focus')),
                items = current.html().split("\n"),
                total = items.length,
                result = '<ol ' + (!isNaN(lineStart) ? 'start="' + lineStart + '"' : '') + '>';

                for (var i = 0; i < total; i++) {
                    if (i === (lineFocus - lineStart)) {
                        result += '<li class="hightlight">';
                    } else {
                        result += '<li>';
                    }

                    result += items[i] + '</li>';
                }

                result += '</ol>';

                var items = current.empty().append(result);
            });
        </script>
        {{/}}
    </body>
</html>
